import React, { useState, useEffect } from 'react'
import Sidebar from './components/Sidebar'
import ExperimentPlanning from './components/ExperimentPlanning'
import DailyWorkPlan from './components/DailyWorkPlan'
import ExperimentStatistics from './components/ExperimentStatistics'
import WeeklyMeetingTodos from './components/WeeklyMeetingTodos'
import EquipmentMaintenance from './components/EquipmentMaintenance'
import KeyPartsInventory from './components/KeyPartsInventory'
import InfoMaintenance from './components/InfoMaintenance'

function App() {
  // 从localStorage读取上次的导航状态，如果没有则默认为'info-maintenance'
  const [activeTab, setActiveTab] = useState(() => {
    return localStorage.getItem('activeTab') || 'info-maintenance'
  })

  // 当activeTab改变时，保存到localStorage
  useEffect(() => {
    localStorage.setItem('activeTab', activeTab)
  }, [activeTab])

  const renderActiveComponent = () => {
    switch(activeTab) {
      case 'experiment-planning':
        return <ExperimentPlanning />
      case 'daily-work-plan':
        return <DailyWorkPlan />
      case 'experiment-statistics':
        return <ExperimentStatistics />
      case 'weekly-meeting-todos':
        return <WeeklyMeetingTodos />
      case 'equipment-maintenance':
        return <EquipmentMaintenance />
      case 'key-parts-inventory':
        return <KeyPartsInventory />
      case 'info-maintenance':
        return <InfoMaintenance />
      default:
        return <InfoMaintenance />
    }
  }

  return (
    <div className="app-container">
      <Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
      <div className="main-content">
        {renderActiveComponent()}
      </div>
    </div>
  )
}

export default App